<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>
	<!--bootstrap-fileinput 文件上传-->
	<script src="/js/bootstrap-fileinput/js/fileinput.js"></script>
	<script src="/js/bootstrap-fileinput/js/locales/zh.js"></script>
	<link href="/js/bootstrap-fileinput/css/fileinput.css" rel="stylesheet">
	<!--        Toastr提示信息5-->
	<script src="/js/toastr/toastr.min.js"></script>
	<link href="/js/toastr/toastr.css" rel="stylesheet">
    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >




<script>

	$(function (){
		getparentid();
	})

	//三级联动第一级
	function getparentid(){
		$.ajax({
			url:"/good/getthree",
			data:{parentId:0},
			dataType:"json",
			type:"get",
			async:false,//同步请求
			success:function (result){
				// console.log(result)
				// alert(d.code)
				// alert(d)
				if(result.code==10000){
					var onelist=result.data
					var html=' <option value="-1">请选择商品分类</option> '
					$(onelist).each(function (i,e){
						html+=' <option value="'+e.id+'">'+e.name+'</option>  '
					})
					$("#oneji").html(html)
				}
			}
		})
	}
	//获取二级
	function gettwoji(value){
		// alert(value)
		$.ajax({
			url:"/good/getthree",
			data:{parentId:value},
			dataType:"json",
			type:"get",
			async:false,//同步请求
			success:function (result){
				// console.log(result)
				// alert(d.code)
				// alert(d)
				if(result.code==10000){
					var twolist=result.data
					var html=' <option value="-1">请选择</option> '
					$(twolist).each(function (i,e){
						html+=' <option value="'+e.id+'">'+e.name+'</option>  '
					})
					$("#twoji").html(html)
					$("#threeji").html('<option value="-1">请选择</option>')
				}
			}
		})
	}
	//获取第三级
	function getthreeji(value){
		$.ajax({
			url:"/good/getthree",
			data:{parentId:value},
			dataType:"json",
			type:"get",
			async:false,//同步请求
			success:function (result){
				// console.log(result)
				// alert(d.code)
				// alert(d)
				if(result.code==10000){
					var threelist=result.data
					var html=' <option value="-1">请选择</option> '
					$(threelist).each(function (i,e){
						html+=' <option value="'+e.id+'">'+e.name+'</option>  '
						// $("#td1").append('<input type="text" value="'+e.typeId+'"/>')
					})
					$("#threeji").html(html)
				}
			}
		})
	}
	//获取模板id
	function getmobanid(value){
		// alert(value)
		$.ajax({
			url:"/good/getbyid",
			data:{id:value},
			dataType:"json",
			type:"get",
			async:false,//同步请求
			success:function (result){
				// console.log(result)
				// alert(d.code)
				// alert(d)
				if(result.code==10000){
					var datas=result.data;
					$("#id1").val(datas.typeId)
				}
			}
		})
		//查询品牌
		$.ajax({
			url:"/good/gettypeid",
			data:{id:$("#id1").val()},
			dataType:"json",
			type:"get",
			async:false,//同步请求
			success:function (result){
				// console.log(result.data)
				if(result.code==10000){
					var datas=result.data;
					var brandlist=datas.brandIds;
					var brandarr=JSON.parse(brandlist);//将字符串转换为数组,获取到brand数组
					var html='';
					for(var i=0;i<brandarr.length;i++){
						html+=' <option value="'+brandarr[i].id+'">'+brandarr[i].text+'</option>  '
					}
					$("#pinparid").html(html)
					// //扩展属性
					var customlist=datas.customAttributeItems;
					var customarr=JSON.parse(customlist);//将字符串转换为数组,获取到customarr数组
					var s='';
					for(var i=0;i<customarr.length;i++){
						s+='<tr>'
						s+='<td>'+customarr[i].text+'</td>'
						s+='<td><input id="inid2" type="text"></td>'
						s+='</tr>'
					}
					$("#table1").html(s)
					//规格
					var specvoslist=datas.specvoslist
					// console.log(specvoslist)
					var spechtml='';
					$(specvoslist).each(function (i,e){
						spechtml+='<tr>'
						spechtml+='<td>'+e.text+'</td>'
						spechtml+='<td>'
						var optionList=e.optionList;
						$(optionList).each(function (j,v){
							spechtml+='<span> '
							spechtml+=' <input value="'+v.optionName+'" type="checkbox" >'+v.optionName
							spechtml+='</span> '
						})
						spechtml+='</td>'
						spechtml+='</tr>'
					})
					$("#spanid").html(spechtml)
				}
			}
		})
	}


</script>

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control"  id="oneji" onchange="gettwoji(this.value)" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="twoji" onchange="getthreeji(this.value)" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="threeji" onchange="getmobanid(this.value)" ></select>
		                              			</td>
		                              			<td id="td1">
<!--		                           	  				模板ID:19-->
													<input type="text" id="id1">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input name="goodsName" id="goodsName" type="text" class="form-control"    placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select id="pinparid" class="form-control" ></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="caption" name="caption"  placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" id="price" name="price"  placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
									<!--富文本-->
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4" id="packageList" name="packageList" class="form-control"   placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4" id="saleService"   name="saleService"  class="form-control"    placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建le</button>

					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
										<!--上传的图片信息-->
					                    <tbody id="tbody1">
					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type">
									<table id="table1" width="100%" border="1px">
									</table>
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<ta>
								<!--屏幕尺寸   	-->
	                                <table border="2px" width="100%" id="spanid">
									</table>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable" id="tableid3">
						                    <thead>
						                        <tr>
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody id="tbodyid3">
						                      <tr>
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control" name="price" id="price1" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" id="num" name="num" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
												  <td>
													  4.0
												  </td>
												  <td>
													  3G
												  </td>
												  <td>
													  <input class="form-control" name="price" id="price2" placeholder="价格">
												  </td>
												  <td>
													  <input class="form-control" id="num2" name="num" placeholder="库存数量">
												  </td>
												  <td>
													  <input type="checkbox" >
												  </td>
												  <td>
													  <input type="checkbox" >
												  </td>
											  </tr>
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary"  onclick="baocun()"  ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input id="incolor" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<!--上传图片-->
									<input type="text" class="form-control" id="newsImg" name="newsImg" >
									<input type="file" id="file" name="image" multiple/>
					            </td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="tubaocui()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});



	//文件上传属性配置
	$('#file').fileinput({
		language: 'zh',//汉化
		uploadUrl: "/good/upload",//上传路径
		browseClass: 'btn btn-primary',//按钮样式
		allowerFileExtensions :["txt","gif","png","jpg"],//设置文件上传的后缀名
		maxFileSize: 20480,//设置文件上传的大小
		maxFileCount: 3,//设置文件上传最大数量
		enctype:"multipart/form-data"//文件上传
	});
	//上传回显
	$("#file").on("fileuploaded",function (event,data,previewId,index){
		if (data.response != null){
			$("#newsImg").val(data.response.data);//data.response就是返回的信息，data是里面的值
		}
	})
	//上传图片保存
	function tubaocui(){
		var url=$("#newsImg").val()
		var color=$("#incolor").val()
		var row=$('<tr><td>'+color+'</td><td> <img alt="" src="'+url+'" width="100px" height="100px"> </td>' +
				'<td> <button type="button" onclick="deleterow(this)" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>' +
				'</tr>')
		var tbo=$("#tbody1")
		row.appendTo(tbo)
		$("#newsImg").val('')//清空input框
		$("#incolor").val('')
		$(".fileinput-remove-button").click();//清空文件上传
	}

	//删除图片
		function deleterow(cc){
			var table = cc.parentNode.parentNode.parentNode;
			var td=cc.parentNode.parentNode;
			table.removeChild(td);
		}


	//保存提交
	function baocun(){
		var category1Id=$("#oneji").val()//一级标签
		var category2Id=$("#twoji").val()//二级标签
		var category3Id=$("#threeji").val()//三级标签
		var brandId=$("#pinparid").val()//品牌
		var goodsName=$("#goodsName").val();//商品名称
		var saleService=$("#saleService").val()//售后服务
		var packageList=$("#packageList").val()//包装列表
		var caption=$("#caption").val()//副标题
		var price=$("#price").val()//价格
		//提取编辑器内容
		var introduction =editor.html();//富文本框内容
		var trlist=$("#tbody1").find("tr")
		// //遍历tr，获取tr下面每个td里面的input
		var arr=[]
		$(trlist).each(function (i,v){
			// console.log(v)
			var tdlist=$(v).find("td");//获取到td数组
			var color=$(tdlist[0]).text();//颜色
			var url=$(tdlist[1]).find("img").attr('src');//url
			var json={color:color,url:url};//json格式
			arr.push(json)
		})
		//图片内容
		var itemImages=JSON.stringify(arr)//将json格式转换为string格式，传输后台,图片内容
		//获取扩展属性
		var customlist=[]
		var trls2=$("#table1").find("tr")
		$(trls2).each(function (i,v){
			var tdls2=$(v).find("td");//获取到td数组
			var text=$(tdls2[0]).text();//属性名字
			var value=$(tdls2[1]).find("input").val();//属性内容
			var json={text:text,value:value};//json格式
			customlist.push(json)
		})
		//扩展属性内容
		var customAttributeItems=JSON.stringify(customlist)//将json格式转换为string格式，传输后台,图片内容
		//获取规格
		var trls3=$("#spanid").find('tr')
		var bigarr=[];
		$(trls3).each(function (i,e){
			var json={}
			var tdls3=$(e).find('td');
			json['attributeName']=$(tdls3[0]).text()//规格名字，放入json中
			var checkboxarr=$(tdls3[1]).find('input')
			var smallarr=[]
			$(checkboxarr).each(function (j,v){
				if($(v).prop('checked')){
					smallarr.push($(v).val())
				}
			})
			json['attributeValue']=smallarr;
			//把json放入大数组里面
			bigarr.push(json)
		})
		var specificationItems=JSON.stringify(bigarr);//获取到规格
		//String规格
		var guiarr=[]//设置一个数组存每一个对象
		var trls4=$("#tbodyid3").find("tr")
		console.log(trls4)
		$(trls4).each(function (i,v){
			var tdlist4=$(v).find("td");//获取到td数组
			var price1=$(tdlist4[2]).find("input").val();
			var num1=$(tdlist4[3]).find("input").val();
			var json={price:price1,num:num1};//json格式
			guiarr.push(json)
		})
		var Stringguige=JSON.stringify(guiarr)//将json格式转换为string格式，传输后台//获取到最后一个值
		$.ajax({
			url:"/good/insertgood",
			type:"post",
			dataType:"json",
			data:{category1Id:category1Id,category2Id:category2Id,category3Id:category3Id,brandId:brandId,goodsName:goodsName,
				saleService:saleService,packageList:packageList,introduction:introduction,itemImages:itemImages,customAttributeItems:customAttributeItems,
				specificationItems:specificationItems,Stringguige:Stringguige,caption:caption,price:price},
			async:false,
			success:function (result){
				console.log(result)
				if(result.code==10000){
					toastr.success("增加成功")
				}
			},error:function (){
				alert("系统异常")
			}
		})


	}




</script>
       
</body>

</html>